<template>
    <el-dialog :title="isadd ? '新增学生' : '编辑学生'" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
        @close="onClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="ruleForm.age"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="ruleForm.address"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="身份证" prop="identity">
                <el-input v-model="ruleForm.identity"></el-input>
            </el-form-item>


            <el-form-item label="是否独生" prop="child">
                <el-radio-group v-model="ruleForm.child">
                    <el-radio label="1">独生子女</el-radio>
                    <el-radio label="2">非独生</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否接种" prop="vaccine">
                <el-radio-group v-model="ruleForm.vaccine">
                    <el-radio label="1">未接种</el-radio>
                    <el-radio label="2">已接种</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="户口所在地" prop="account">
                <el-select v-model="ruleForm.account" placeholder="户口所在地">
                    <el-option label="农村户口" value="2"></el-option>
                    <el-option label="城市户口" value="1"></el-option>
                </el-select>
            </el-form-item>


            <el-form-item style='text-align:right'>
                <el-button @click="onClose">取消</el-button>
                <el-button type="primary" @click="submitForm">确认</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
    name: 'data-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            dialogFormVisible: false,
            isadd: false,
            ruleForm: {
                child: '1',
                vaccine: '1'
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请输入地址', trigger: 'blur' },
                ],
                phone: [
                    { required: true, message: '请输入手机电话号', trigger: 'blur' },
                    { pattern: /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
                ],
                identity: [
                    { required: true, message: '请输入身份证号码', trigger: 'blur' },
                    {
                        pattern: /^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/,
                        message: '请输入正确的身份证号码', trigger: 'blur'
                    }
                ], account: [
                    { required: true, message: '请选择户口所在地', trigger: 'blur' },
                ],
            }
        }
    },
    methods: {
        ...mapMutations(['addTableData', 'ediTableData']),
        show(row) {
            if (row) {
                this.isadd = false;
                this.ruleForm = Object.assign({}, row);
            } else {
                this.isadd = true;
            }
            this.dialogFormVisible = true;
        },
        submitForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let obj = Object.assign({
                        id: Math.random() + ''
                    }, this.ruleForm)

                    if (this.isadd) {
                        this.addTableData(obj)
                    } else {
                        this.ediTableData(obj)
                    }
                    this.$emit('close')
                    this.dialogFormVisible = false;
                } else {
                    console.log('验证失败,请正确输入!!');
                    return false;
                }
            });
        },

        onClose() {
            this.$emit('close')
        }
    }
}
</script>

<style scoped></style>